// 源插件
import React, { PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';
// 视图插件
import { Button, Card, Form, message, Modal, notification } from 'antd';
// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import ReactKline from 'react-kline-pro';
import $ from 'jquery';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ coordinates, loading }) => ({
  coordinates,
  loading: loading.models.coordinatesRule,
}))
@Form.create()
class CoordinatesSignal extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceCoordinatesBuyList: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceCoordinatesSellList: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceCoordinatesWarnList: {
      data: [],
      total: [],
      code: 0,
    },
    Visible: false,
    targetPrice: 0, // 目标价
    symbol: '',
  };

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'coordinates/GetCoordinatesSignal',
      payload: {},
      callback: res => {
        that.setState({
          dataSourceCoordinatesBuyList: {
            title: '买入监控列表',
            unfixed: true,
            code: 1,
            data: res.data.buyList,
            total: [],
            columns: [
              {
                title: '股票代码',
                dataIndex: 'code',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
                render: (value, row, index) => {
                  return (
                    <div
                      onClick={this.klineModalOpen.bind(this, value, row.targetPrice)}
                      style={{ cursor: 'pointer' }}
                    >
                      {value}
                    </div>
                  );
                },
              },
              // {
              //   title: '类型',
              //   dataIndex: 'type',
              //   type: 'number',
              //   width: 60,
              //   filters: [
              //     {
              //       text: '买入',
              //       value: '0',
              //     },
              //     {
              //       text: '卖出',
              //       value: '1',
              //     },
              //   ],
              //   render: (value, row, index) => {
              //     if (value === 1) {
              //       return '卖出';
              //     } else if (value === 0) {
              //       return '买入';
              //     } else {
              //       return value;
              //     }
              //   },
              // },
              {
                title: '目标价',
                width: 100,
                dataIndex: 'targetPrice',
                type: 'number',
                sorter: true,
                editable: true,
              },
              {
                title: '现价',
                width: 100,
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '是否警示',
                width: 80,
                dataIndex: 'isWarn',
                type: 'string',
                render: (value, row, index) => {
                  if (value) {
                    return '是';
                  }
                  return '否';
                },
              },
              {
                title: '备注',
                width: 150,
                dataIndex: 'mark',
                type: 'string',
                editable: true,
              },
            ],
          },
          dataSourceCoordinatesSellList: {
            title: '卖出监控列表',
            unfixed: true,
            code: 1,
            data: res.data.sellList,
            total: [],
            columns: [
              {
                title: '股票代码',
                dataIndex: 'code',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
                render: (value, row, index) => {
                  return (
                    <div
                      onClick={this.klineModalOpen.bind(this, value, row.targetPrice)}
                      style={{ cursor: 'pointer' }}
                    >
                      {value}
                    </div>
                  );
                },
              },
              // {
              //   title: '类型',
              //   dataIndex: 'type',
              //   type: 'number',
              //   width: 60,
              //   filters: [
              //     {
              //       text: '买入',
              //       value: '0',
              //     },
              //     {
              //       text: '卖出',
              //       value: '1',
              //     },
              //   ],
              //   render: (value, row, index) => {
              //     if (value === 1) {
              //       return '卖出';
              //     } else if (value === 0) {
              //       return '买入';
              //     } else {
              //       return value;
              //     }
              //   },
              // },
              {
                title: '目标价',
                width: 100,
                dataIndex: 'targetPrice',
                type: 'number',
                sorter: true,
                editable: true,
              },
              {
                title: '现价',
                width: 100,
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '是否警示',
                width: 80,
                dataIndex: 'isWarn',
                type: 'string',
                render: (value, row, index) => {
                  if (value) {
                    return '是';
                  }
                  return '否';
                },
              },
              {
                title: '备注',
                width: 150,
                dataIndex: 'mark',
                type: 'string',
                editable: true,
              },
            ],
          },
          dataSourceCoordinatesWarnList: {
            title: '警示监控列表',
            unfixed: true,
            code: 1,
            data: res.data.warnList,
            total: [],
            columns: [
              {
                title: '股票代码',
                dataIndex: 'code',
                type: 'string',
                width: 120,
                sorter: true,
                search: true,
                render: (value, row, index) => {
                  return (
                    <div
                      onClick={this.klineModalOpen.bind(this, value, row.targetPrice)}
                      style={{ cursor: 'pointer' }}
                    >
                      {value}
                    </div>
                  );
                },
              },
              // {
              //   title: '类型',
              //   dataIndex: 'type',
              //   type: 'number',
              //   width: 60,
              //   filters: [
              //     {
              //       text: '买入',
              //       value: '0',
              //     },
              //     {
              //       text: '卖出',
              //       value: '1',
              //     },
              //   ],
              //   render: (value, row, index) => {
              //     if (value === 1) {
              //       return '卖出';
              //     } else if (value === 0) {
              //       return '买入';
              //     } else {
              //       return value;
              //     }
              //   },
              // },
              {
                title: '目标价',
                width: 100,
                dataIndex: 'targetPrice',
                type: 'number',
                sorter: true,
                editable: true,
              },
              {
                title: '现价',
                width: 100,
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '是否警示',
                width: 80,
                dataIndex: 'isWarn',
                type: 'string',
                render: (value, row, index) => {
                  if (value) {
                    return '是';
                  }
                  return '否';
                },
              },
              {
                title: '备注',
                width: 150,
                dataIndex: 'mark',
                type: 'string',
                editable: true,
              },
            ],
          },
        });
      },
    });
  }

  rowSetKey(record, index) {
    if (record.isWarn) {
      return true;
    }
  }

  openVisible() {
    this.dataSourceModalChange();
    this.setState({
      Visible: true,
    });
  }

  closeVisbile() {
    const that = this;
    this.setState(
      {
        Visible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  handleSave(row, values) {
    const that = this;
    const { dispatch } = that.props;
    dispatch({
      type: 'coordinates/UpdateCoordinatesSignal',
      payload: {
        id: row.id,
        targetPrice: values.targetPrice,
        mark: values.mark,
      },
      callback: res => {
        that.dataSourceChange();
      },
    });
  }
  //
  // rowSetKey(record, index) {
  //   if (record.ctbflag === 1) {
  //     return true;
  //   }
  // }

  klineModalOpen(value, targetPrice) {
    const that = this;
    that.setState({}, () => {
      $.ajax({
        type: 'GET',
        url: `http://fss.91stock.net/fss/Kline/GetStockInfo?code=${value}`,
        contentType: 'application/x-www-form-urlencoded;charset=utf-8',
        dataType: 'json',
        async: false,
        success(data) {
          if (data.myCode !== null) {
            that.setState({
              Visible: true,
              targetPrice,
              symbol: that.state.symbol === '' ? data.myCode : `${data.myCode}  ${Math.random()}`,
            });
          } else {
            message.error('暂无该股票信息');
          }
        },
        error(e) {
          console.log(e);
        },
      });
    });
  }

  klineModalClose() {
    this.setState({ Visible: false });
  }

  onRequestData(param, callback) {
    const that = this;
    $.ajax({
      type: 'GET',
      url: `http://fss.91stock.net/fss/Kline/GetKline?code=${param.symbol}`,
      contentType: 'application/x-www-form-urlencoded;charset=utf-8',
      dataType: 'json',
      async: true,
      success(data) {
        if (data.code === 1) {
          // debugger
          let dataCall = [];
          const coordinates = [];
          // debugger
          coordinates[0] = data.coordinates[data.coordinates.length - 1];
          dataCall = data.kline.data.item;
          callback({
            success: true,
            data: {
              lines: dataCall,
              monthCoordinates: data.monthCoordinates,
              caution: that.state.targetPrice,
              coordinates,
              symbol: data.kline.data.symbol,
            },
          });
        }
      },
      error(e) {
        console.log(e);
      },
    });
  }

  render() {
    const {
      Visible,
      dataSourceModal,
      dataSourceCoordinatesSellList,
      dataSourceCoordinatesBuyList,
      dataSourceCoordinatesWarnList,
    } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <StandardTablePro
            dataSource={dataSourceCoordinatesBuyList}
            handleSave={this.handleSave.bind(this)}
            rowSetKey={this.rowSetKey.bind(this)}
          />
          <br />
          <br />
          <StandardTablePro
            dataSource={dataSourceCoordinatesSellList}
            handleSave={this.handleSave.bind(this)}
            rowSetKey={this.rowSetKey.bind(this)}
          />
          <br />
          <br />
          <StandardTablePro
            dataSource={dataSourceCoordinatesWarnList}
            handleSave={this.handleSave.bind(this)}
            rowSetKey={this.rowSetKey.bind(this)}
          />
          <Modal
            width="90%"
            title="K线"
            footer=""
            visible={Visible}
            centered
            onOk={this.klineModalClose.bind(this)}
            onCancel={this.klineModalClose.bind(this)}
          >
            <ReactKline
              height={688}
              ranges={['1d']}
              symbol={this.state.symbol}
              symbolName={this.state.symbol}
              intervalTime={500000000}
              depthWidth={100}
              onRequestData={this.onRequestData.bind(this)}
            />
          </Modal>
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default CoordinatesSignal;
